<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="iconfont.css" />
  </head>
  <body>
    <div class="box">
      <!-- 头部 -->
      <header>
        <div class="header-left">
          <a href="https://www.jianshu.com/">首页</a>
          <a href="https://www.jianshu.com/">下载APP</a>
          <form action="">
            <input type="text" class="searchInput" placeholder="搜索" />
            <i class="iconfont icon-sousuo"></i>
          </form>
        </div>
        <!-- 右边部分 -->
        <div class="header-right">
          <a>Aa</a>
          <a>登录</a>
          <a>注册</a>
          <a>写文章</a>
        </div>
      </header>
      <!-- main -->
      <div class="main">
        <div class="swiper">
          <ul class="swiperList">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <!-- 文章列表 -->
        <div class="article">
          <div>
            <h1>贪酒、嗜赌、好色，没想到你是这样的李清照！</h1>
            <p>
              李清照，婉约派词人代表，千古第一才女！
              绝大多数人初识李清照应该是在课本中，她是大家闺秀、千古才女，与丈夫赵明诚志同道合，伉俪情深。词作中所体现...
            </p>
            <span>小叼毛</span>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-love-b"></i>
          </div>
          <img src="images/article.jpg" alt="" />
        </div>
        <div class="article">
          <div>
            <h1>贪酒、嗜赌、好色，没想到你是这样的李清照！</h1>
            <p>
              李清照，婉约派词人代表，千古第一才女！
              绝大多数人初识李清照应该是在课本中，她是大家闺秀、千古才女，与丈夫赵明诚志同道合，伉俪情深。词作中所体现...
            </p>
            <span>小叼毛</span>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-love-b"></i>
          </div>
          <img src="images/article.jpg" alt="" />
        </div>
        <div class="article">
          <div>
            <h1>贪酒、嗜赌、好色，没想到你是这样的李清照！</h1>
            <p>
              李清照，婉约派词人代表，千古第一才女！
              绝大多数人初识李清照应该是在课本中，她是大家闺秀、千古才女，与丈夫赵明诚志同道合，伉俪情深。词作中所体现...
            </p>
            <span>小叼毛</span>
            <i class="iconfont icon-pinglun"></i>
            <i class="iconfont icon-love-b"></i>
          </div>
          <img src="images/article.jpg" alt="" />
        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="right">
        <!-- 列表 -->
        <ul class="imgList">
          <li><img src="images/slider1.png" alt="" /></li>
          <li><img src="images/slider2.png" alt="" /></li>
          <li><img src="images/slider3.png" alt="" /></li>
          <li><img src="images/slider4.png" alt="" /></li>
          <li><img src="images/slider5.png" alt="" /></li>
          <li><img src="images/slider6.png" alt="" /></li>
        </ul>
        <div class="title">
          <span>推荐作者</span>
          <span class="iconfont icon-dashujukeshihuaico-"></span>
        </div>
        <div class="authors">
          <div class="author">
            <img src="https://upload.jianshu.io/users/upload_avatars/8781442/79bf6acc-5dd3-49d1-9e2b-6c58066c1442.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
            <span>测试</span>
            <span>+关注</span>
            <span>写了263.8k字 · 2.4k喜欢</span>
          </div>
          <div class="author">
            <img src="https://upload.jianshu.io/users/upload_avatars/8781442/79bf6acc-5dd3-49d1-9e2b-6c58066c1442.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
            <span>测试</span>
            <span>+关注</span>
            <span>写了263.8k字 · 2.4k喜欢</span>
          </div>
          <div class="author">
            <img src="https://upload.jianshu.io/users/upload_avatars/8781442/79bf6acc-5dd3-49d1-9e2b-6c58066c1442.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
            <span>测试</span>
            <span>+关注</span>
            <span>写了263.8k字 · 2.4k喜欢</span>
          </div>
          <div class="author">
            <img src="https://upload.jianshu.io/users/upload_avatars/8781442/79bf6acc-5dd3-49d1-9e2b-6c58066c1442.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
            <span>测试</span>
            <span>+关注</span>
            <span>写了263.8k字 · 2.4k喜欢</span>
          </div>
          <div class="author">
            <img src="https://upload.jianshu.io/users/upload_avatars/8781442/79bf6acc-5dd3-49d1-9e2b-6c58066c1442.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
            <span>测试</span>
            <span>+关注</span>
            <span>写了263.8k字 · 2.4k喜欢</span>
          </div>
          <div>查看全部 ></div>
        </div>
      </div>
      <!-- 页脚 -->
      <footer></footer>
    </div>
  </body>
</html>
